<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryForm"
      :inline="true"
      v-show="showSearch"
      label-width="68px"
    >
      <el-form-item label="操作人" prop="userName">
        <el-input
          v-model="queryParams.userName"
          placeholder="请输入操作人"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="接口ID" prop="interId">
        <el-input
          v-model="queryParams.interId"
          placeholder="请输入接口ID"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="执行结果" prop="interRes">
        <el-select
          v-model="queryParams.interRes"
          placeholder="请选择"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        >
          <el-option label="成功" :value="0"> </el-option>
          <el-option label="失败" :value="1"> </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
          >搜索</el-button
        >
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
          >重置</el-button
        >
      </el-form-item>
    </el-form>
    <el-row :gutter="10" class="mb8">
      <el-radio-group v-model="chartsType">
        <el-radio :label="0">柱状图</el-radio>
        <el-radio :label="1">折线图</el-radio>
        <el-radio :label="2">饼图</el-radio>
      </el-radio-group>
    </el-row>
    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
    <div
      v-show="chartsType === 0"
      id="barCharts"
      style="width: 1200px; height: 600px"
    ></div>

    <div
      v-show="chartsType === 1"
      id="lineCharts"
      style="width: 1200px; height: 600px"
    ></div>

    <div
      v-show="chartsType === 2"
      id="pieCharts"
      style="width: 1200px; height: 600px"
    ></div>
  </div>
</template>

<script>
import * as echarts from "echarts";

export default {
  name: "Count",
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        userName: null,
        interId: null,
        interRes: null,
      },
      chartsType: 0,
    };
  },
  mounted() {
    this.initCharts();
  },
  methods: {
    getList() {},
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        userName: null,
        interId: null,
        interRes: null,
        status: 0,
        createTime: null,
        updateTime: null,
      };
      this.resetForm("form");
    },
    initCharts() {
      let myBarChart = echarts.init(document.getElementById("barCharts"));
      let myLineChart = echarts.init(document.getElementById("lineCharts"));
      let myPieCHart = echarts.init(document.getElementById("pieCharts"));
      myBarChart.setOption({
        title: {
          text: "接口执行结果统计--柱状图",
          right: "center",
        },
        xAxis: {
          type: "category",
          data: ["成功", "失败"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [120, 200],
            type: "bar",
            barWidth: "20%",
          },
        ],
        itemStyle: {
          color: "#acd897",
          barBorderRadius: 5,
          borderWidth: 1,
          borderType: "solid",
          borderColor: "#73c0de",
          shadowColor: "#5470c6",
          shadowBlur: 3,
        },
      });
      myLineChart.setOption({
        xAxis: {
          type: "category",
          data: ["成功", "失败"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [120, 200],
            type: "line",
          },
        ],
        label: {
          show: true,
          position: "bottom",
          textStyle: {
            fontSize: 20,
          },
        },
      });
      myPieCHart.setOption({
        title: {
          text: "Referer of a Website",
          subtext: "Fake Data",
          left: "center",
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          left: "left",
        },
        series: [
          {
            name: "Access From",
            type: "pie",
            radius: "50%",
            data: [
              { value: 1048, name: "Search Engine" },
              { value: 735, name: "Direct" },
              { value: 580, name: "Email" },
              { value: 484, name: "Union Ads" },
              { value: 300, name: "Video Ads" },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      });
    },
  },
};
</script>

<style scoped></style>
